<template>
    <div class="menuWrap">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <div class="logo"></div>
            <template v-for="item in menu" :key="item.key">
                <el-sub-menu :index="item.key" v-if="Array.isArray(item.children) && item.children.length > 0">
                    <template #title>{{ item.title }}</template>
                    <template v-for="items in item.children" :key="items.key">
                        <el-sub-menu :index="items.key"
                            v-if="Array.isArray(items.children) && items.children.length > 0">
                            <template #title>{{ items.title }}</template>
                        </el-sub-menu>
                        <el-menu-item :index="items.key" v-else>{{ items.title }}</el-menu-item>
                    </template>
                </el-sub-menu>
                <el-menu-item :index="item.key" v-else>{{ item.title }}</el-menu-item>
            </template>
        </el-menu>
    </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { menuData } from './static';
import { useRoute, useRouter } from 'vue-router';
export default {
    name: 'HsMenu',
    setup() {
        const activeIndex = ref();
        const menu = ref([]);
        const route = useRoute();
        const router = useRouter();
        // 菜单点击事件
        const handleSelect = (e) => {
            router.push(e);
        }
        onMounted(() => {
            menu.value = menuData;
            if (route.fullPath == '/') {
                activeIndex.value = menuData?.[0]?.key;
            } else {
                activeIndex.value = route.name;
            }
        })
        return {
            activeIndex,
            handleSelect,
            menu,
        }
    },
}
</script>
<style lang="less" scoped>
.menuWrap {

    .logo {
        width: 120px;
        height: 60px;
        background-color: pink;
    }
}
</style>